<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue实训项目</title>
		<script src="./js/jquery-3.5.1.js"></script>
		<script src="./js/vue.js"></script>
		<link rel="stylesheet" type="text/css" href="./css/main.css"/>
		<link rel="stylesheet" type="text/css" href="./css/bootstrap.css"/>
	</head>
	<body>
		
		<div class="container" id="app">
			<div class="page-header">
			<h1>学生信息</h1>
		</div>
		    <div class="panel">
		        <input type="text" placeholder="请输入要搜索的内容" @input="search" list="cars" class="search" />
		        <datalist id="cars">
		            <option v-for="item in searchlist" :value="item"></option>
		        </datalist>
		        <input type="button" class="add" @click="add" value="新增" class="add"/>
		    </div>
		    <div>
		        <table class="table">
					<thead>
						 <tr>
							<th>序号</th>
							<th>姓名</th>
							<th>学号</th>
							<th>性别</th>
							<th>年龄</th>
							<th>爱好</th>
							<th>操作</th>
						</tr>
					</thead>
		           <tbody>
						<tr v-cloak v-for="(item, index) of slist" v-if="index>=(curpage-1)*pagesize&&index<curpage*pagesize">
							<td>{{ index + 1 }}</td>
							<td>{{ item.username }}</td>
							<td>{{ item.no }}</td>
							<td>{{ item.sex }}</td>
							<td>{{ item.age }}</td>
							<td>{{ item.hobby.join(' | ') }}</td>
							<td>
								<button @click="showOverlay(index)" class="mod">修改</button> &nbsp;
								<button @click="del(index)" class="del">删除</button>
							</td>
						</tr>
		           </tbody>
		            
		        </table>
				<nav style="float:right;">
				    <ul class="pagination">
				        <template v-for="page in Math.ceil(slist.length/pagesize)">
				            <li v-on:click="PrePage()" id="prepage" v-if="page==1" class="disabled"><a href="javascript:;">上一页</a></li>
				            <li v-if="page==1" class="active" v-on:click="NumPage(page, $event)"><a href="javascript:;">{{page}}</a></li>
				            <li v-else v-on:click="NumPage(page, $event)"><a href="javascript:;">{{page}}</a></li>
				            <li id="nextpage" v-on:click="NextPage()" v-if="page==Math.ceil(slist.length/pagesize)"><a href="javascript:;">下一页</a></li>
				        </template>
				    </ul>
				</nav>
		    </div>
		    <model :list="selectedlist" :isactive="isActive" v-cloak @change="changeOverlay" @modify="modify"></model>
		</div>
		
		<script src="js/main.js"></script>
		
		
	</body>
</html>
